<template>
  <div class="home-page">
    <!-- Banner轮播区 -->
    <section class="banner-section">
      <el-carousel height="500px" :interval="5000" arrow="always" indicator-position="outside">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <div class="banner-container">
            <img :src="banner.image" :alt="banner.title || '轮播图片'" class="banner-image">
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
    
    <!-- 产品展示模块 -->
    <section class="product-showcase-section">
      <h2>产品展示模块</h2>
      <p>特色产品展示区 + 产品列表区</p>
    </section>
    
    <section class="product-sell-section">
      <h2>产品售卖模块</h2>
      <p>产品售卖区 + 产品列表区</p>
    </section>

    <!-- 招商加盟区 -->
    <section class="franchise-section">
      <h2>招商加盟区</h2>
      <p>三组图文组合展示加盟优势</p>
    </section>
    
    <!-- 加盟店展示区 -->
    <section class="franchise-stores-section">
      <h2>加盟店展示区</h2>
      <p>展示各类型加盟店</p>
    </section>
    
    <!-- 企业介绍区 -->
    <section class="company-intro-section">
      <h2>企业介绍区</h2>
      <p>爱之浓丝：让天下女人都靓起来</p>
    </section>
    
    <!-- 热卖产品区 -->
    <section class="hot-products-section">
      <h2>热卖产品区</h2>
      <p>横向滚动展示热门产品</p>
    </section>
    
    <!-- 新闻动态和推荐产品区 -->
    <section class="news-and-products-section">
      <h2>新闻动态和推荐产品区</h2>
      <div class="section-content">
        <div class="news-section">
          <h3>新闻动态</h3>
          <p>新闻列表占位</p>
          <div class="news-more">
            <router-link to="/news" class="link-more">查看更多</router-link>
          </div>
        </div>
        <div class="recommended-products">
          <h3>推荐产品</h3>
          <p>推荐产品列表占位</p>
          <div class="products-more">
            <router-link to="/products" class="link-more">查看更多</router-link>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Banner轮播图数据
const banners = ref([
  {
    id: 1,
    image: '/src/assets/images/banner1.jpg',
    title: '爱之浓丝品牌形象'
  },
  {
    id: 2,
    image: '/src/assets/images/banner2.jpg',
    title: '专业护理'
  },
  {
    id: 3,
    image: '/src/assets/images/banner3.jpg',
    title: '时尚造型'
  },
  {
    id: 4,
    image: '/src/assets/images/banner4.jpg',
    title: '美容服务'
  },
  {
    id: 5,
    image: '/src/assets/images/banner5.jpg',
    title: '品牌加盟'
  }
]);
</script>

<style lang="scss" scoped>
.home-page {
  .banner-section {
    width: 100%;
    margin-bottom: 30px;
    padding: 0; 
    max-width: 100%; // 覆盖section的max-width
    background-color: #f5f5f5;
    
    .banner-container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    
    .banner-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain; // 保持图片比例
    }
  }
  
  section {
    padding: 50px 0;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px dashed #eee;
    
    &:nth-child(odd) {
      background-color: #f9f9f9;
    }
    
    h2 {
      color: #ff6b9d;
      margin-bottom: 20px;
    }
  }
  
  .news-and-products-section {
    .section-content {
      display: flex;
      justify-content: space-between;
      text-align: left;
      
      @media (max-width: 768px) {
        flex-direction: column;
      }
      
      > div {
        flex: 1;
        margin: 0 15px;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        
        @media (max-width: 768px) {
          margin: 15px 0;
        }
      }
      
      h3 {
        color: #333;
        margin-bottom: 15px;
        border-bottom: 2px solid #ff6b9d;
        padding-bottom: 10px;
      }
      
      .link-more {
        display: inline-block;
        margin-top: 15px;
        color: #ff6b9d;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

:deep(.el-carousel__container) {
  height: 500px;
}

:deep(.el-carousel__arrow) {
  background-color: rgba(255, 107, 157, 0.6);
  width: 50px;
  height: 50px;
  
  &:hover {
    background-color: rgba(255, 107, 157, 0.8);
  }
}

:deep(.el-carousel__indicators) {
  bottom: 20px;
  
  .el-carousel__button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
  }
  
  .el-carousel__indicator.is-active .el-carousel__button {
    background-color: #ff6b9d;
  }
}
</style> 